<template>
  <div class="form-single-fragment" style="position: relative;">
    <el-form ref="pageBasicInfo" style="width: 97%;" size="small" :model="formPageData" :rules="formRules" label-position="right" label-width="100px" @submit.native.prevent>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="页面类型">
            <el-select v-model="formPageData.pageType" :disabled="isEdit">
              <el-option :value="SysOnlinePageType.BIZ" :label="SysOnlinePageType.getValue(SysOnlinePageType.BIZ)" />
              <el-option :value="SysOnlinePageType.FLOW" :label="SysOnlinePageType.getValue(SysOnlinePageType.FLOW)" />
              <el-option :value="SysOnlinePageType.STATS" :label="SysOnlinePageType.getValue(SysOnlinePageType.STATS)" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="页面编码" prop="pageCode">
            <el-input v-model="formPageData.pageCode" :disabled="isEdit" @change="dirty = true" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="页面名称" prop="pageName">
            <el-input v-model="formPageData.pageName" @change="dirty = true" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer btnList">
      <el-button type="primary" :plain="true" @click="onCancel(false)">取消</el-button>
      <el-button type="primary" @click="onSavePageBasicInfo()">保存</el-button>
    </div>
  </div>
</template>

<script>
import '@/staticDict/onlineStaticDict.js'
/* eslint-disable-next-line */
import rules from '@/utils/validate.js'
/* eslint-disable-next-line */
import { uploadMixin, statsDateRangeMixin } from '@/core/mixins'
/* eslint-disable-next-line */
import { OnlinePageController, OnlineDblinkController } from '@/api/onlineController.js'
export default {
  name: 'EditFormBasicInfo',
  mixins: [uploadMixin, statsDateRangeMixin],
  props: {
    pageId: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      // 页面基础信息
      formPageData: {
        pageId: undefined,
        pageCode: undefined,
        pageName: undefined,
        published: false,
        pageType: this.SysOnlinePageType.BIZ,
        status: this.SysOnlinePageStatus.BASIC
      },
      // 数据库信息
      dblinkInfo: {},
      formRules: {
        pageCode: [
          { required: true, message: '页面编码不能为空！', trigger: 'blur' },
          { type: 'string', pattern: /^[A-Za-z0-9]+$/, message: '页面编码只允许输入字母和数字', trigger: 'blur' }
        ],
        pageName: [
          { required: true, message: '页面名称不能为空！', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    isEdit() {
      return this.formPageData.pageId != null && this.formPageData.pageId !== ''
    }
  },
  watch: {
  },
  mounted() {
    this.loadDblinkList().then(res => {
      return this.initPageInfo()
    }).then(res => {
      this.formPageData = {
        pageId: res.data.pageId,
        pageCode: res.data.pageCode,
        pageName: res.data.pageName,
        published: res.data.published,
        pageType: res.data.pageType,
        status: res.data.status
      }
    }).catch(e => {})
  },
  methods: {
    onCancel(isSuccess) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess)
      }
    },
    /**
     * 保存页面基础信息
     */
    savePageInfo(status) {
      const params = {
        onlinePageDto: {
          ...this.formPageData,
          status: status,
          published: false
        }
      }
      return this.isEdit ? OnlinePageController.update(params) : OnlinePageController.add(params)
    },
    /**
     * 保存页面基础信息
     */
    onSavePageBasicInfo() {
      return new Promise((resolve, reject) => {
        this.$refs.pageBasicInfo.validate(valid => {
          if (!valid || !this.dirty) {
            valid ? resolve() : reject()
            return
          }
          this.savePageInfo(this.SysOnlinePageStatus.DATASOURCE).then(res => {
            this.$message.success('保存页面基础信息成功！')
            if (!this.isEdit) this.formPageData.pageId = res.data
            this.dirty = false
            resolve()
            this.onCancel(true)
          }).catch(e => {
            reject(e)
          })
        })
      })
    },
    /**
     * 获取数据库信息
     */
    loadDblinkList() {
      return new Promise((resolve, reject) => {
        this.dblinkInfo = {}
        OnlineDblinkController.list({}).then(res => {
          res.data.dataList.forEach(item => {
            this.dblinkInfo[item.dblinkId] = {
              ...item,
              tableList: undefined
            }
          })
          resolve()
        }).catch(e => {
          reject(e)
        })
      })
    },
    /**
     * 初始化页面基础信息
     */
    initPageInfo() {
      this.formPageData = {
        pageId: undefined,
        pageCode: undefined,
        pageName: undefined,
        pageType: this.SysOnlinePageType.BIZ,
        status: this.SysOnlinePageStatus.BASIC
      }
      if (this.pageId != null || this.formPageData.pageId != null) {
        const params = {
          pageId: this.pageId || this.formPageData.pageId
        }

        return OnlinePageController.view(params)
      } else {
        return Promise.resolve()
      }
    }
  }
}
</script>

<style  lang="scss">
  .form-single-fragment {
    display: flex;

    flex-direction: column;
    margin: 10px 0;
    .blueLink {
      color: #409eff;
      font-size: 14px;
      margin-left: 20px;
      cursor: pointer;
    }
    .btnList {
      margin-top:20px;
      display: flex;
      justify-content: right;
      float: right;
      .submitBtn {
        margin-right: 30px;
      }
    }
    .fromFlex {
      height: 36px;
      display: flex;
      align-items: center;
    }
    .base-info {
      display: flex;
      margin-bottom: 20px;
      .basics-info {
        width: 100%;
      }
    }
  }
</style>
